'use strict'
var placeholders = document.querySelectorAll('.styled-input__placeholder-text'),
  inputs = document.querySelectorAll('.styled-input__input')
placeholders.forEach(function (el, i) {
  var value = el.innerText,
    html = ''
  for (
    var _iterator = value,
      _isArray = Array.isArray(_iterator),
      _i = 0,
      _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();
    ;

  ) {
    var _ref
    if (_isArray) {
      if (_i >= _iterator.length) break
      _ref = _iterator[_i++]
    } else {
      _i = _iterator.next()
      if (_i.done) break
      _ref = _i.value
    }
    var w = _ref
    if (!value) value = '&nbsp;'
    html += '<span class="letter">' + w + '</span>'
  }
  el.innerHTML = html
})
inputs.forEach(function (el) {
  var parent = el.parentNode
  el.addEventListener(
    'focus',
    function () {
      parent.classList.add('filled')
      placeholderAnimationIn(parent, true)
    },
    false
  )
  el.addEventListener(
    'blur',
    function () {
      if (el.value.length) return
      parent.classList.remove('filled')
      placeholderAnimationIn(parent, false)
    },
    false
  )
})
function placeholderAnimationIn(parent, action) {
  var act = action ? 'add' : 'remove'
  var letters = parent.querySelectorAll('.letter')
  letters = [].slice.call(letters, 0)
  if (!action) letters = letters.reverse()
  letters.forEach(function (el, i) {
    setTimeout(function () {
      var contains = parent.classList.contains('filled')
      if ((action && !contains) || (!action && contains)) return
      el.classList[act]('active')
    }, 50 * i)
  })
}
setTimeout(function () {
  document.body.classList.add('on-start')
}, 100)
setTimeout(function () {
  document.body.classList.add('document-loaded')
}, 1800)
